<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>leaflet api中文版</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/index-mobile.css" />
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="left-panel scroll-box-container" :class="{'panel-fold': !isExpand}">
        <div class="operate-btn" :class="isExpand ? 'btn-fold': 'btn-expand'" @click="isExpand = !isExpand"></div>
        <div class="scroll-box" v-if="isExpand">
          <div v-for="nav of navList" :key="nav.id">
            <div class="nav-item nav-item-point" @click="navClick(nav)" :class="{ 'nav-item-selected': nav.checked }">
              <div class="sub-nav">{{ nav.title }}</div>
            </div>
            <div v-show="nav.children && nav.expand" class="nav-item nav-item-list">
              <div
                v-for="child of nav.children"
                :key="child.id"
                class="nav-item nav-item-child"
                @click.stop="navClick(child)"
                :class="{ 'nav-item-selected': child.checked }"
              >
                <div class="sub-nav">{{ child.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-panel">
        <div class="right-panel_title"><span>leaflet api中文版</span></div>
        <div class="iframe-content md-box">
          <template v-for="(nav, index) of mdList" :key="index">
            <a :anchor="nav"></a>
            <div :id="nav" class="md-item"></div>
          </template>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="./lib/vue/vue.min.js"></script>
  <script type="text/javascript" src="./lib/marked/marked.min.js"></script>
  <script type="text/javascript" src="./js/config.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          navList: [],
          mdList: [],
          componentTitle: "",
          isExpand: false,
        };
      },
      mounted: function () {
        this.init();
        this.$nextTick(() => {
          this.showContent();
        });
      },
      methods: {
        // 初始化
        init() {
          this.navList = NAV_LIST;
          this.navList.forEach((nav, index) => {
            if (nav.id) {
              nav.target = nav.id;
              this.mdList.push(nav.id);
            }
            {
              if (nav.children) {
                nav.target = nav.children[0]["id"];
                nav.children.forEach((child, childIndex) => {
                  this.mdList.push(child.id);
                  child.target = child.id;
                });
              }
            }
          });
          console.log(this.navList);
        },
        navClick(item) {
          this.$set(item, "expand", !item.expand);
          if (item.target) {
            window.location.href = `#${item.target}`;
          }
        },
        setNavChecked(item) {},
        showContent() {
          this.navList.forEach((nav, index) => {
            if (nav.path) {
              $.get(nav.path, function (response, status, xhr) {
                $(`#${nav.id}`).html(marked(response));
              });
            }
            if (nav.children) {
              nav.children.forEach((child, childIndex) => {
                $.get(child.path, function (response, status, xhr) {
                  $(`#${child.id}`).html(marked(response));
                });
              });
            }
          });
        },
      },
    });
  </script>
</html>
